
//表单组件
Vue.component('gcTable',{
    props:{
        state:{
            type:Boolean,
            default:true,
        }
    },
    data(){
        return{
            // account:'',
            // password:''
            formData:{
                account:'',
                password:''
            }
        }
    },
    template:`<fieldset>
        <legend>封装表单组件</legend>
        用户名：<input type="text" v-model="formData.account">
        密码：<input type="password" v-model="formData.password">
        <button v-if="state" @click="$emit('submit',formData)">提交</button>
        
    </fieldset>
    `
})

//导航组件
Vue.component('gcNavBar',{
    props:{
        title:{
            type:String,
            required:true
        },
        leftArrow:Boolean
    },
    template:`<div class="gc-nav-bar">
        <span @click="$emit('click-left')">
            {{leftArrow? '<返回' :' '}}
        </span>
        <span>{{title}}</span>
        <span @click="$emit('click-right')">🔍</span>
    </div>
    `
})

//按钮组件
Vue.component('gcButton',{
    props:{
        content:{
            type:String,
            required:true
        },
        type:{
            type:String,
            default:'primary'
        }
    },
    template:`<button :class="['gc-button', 'gc-button--'+type, 'gc-button--normal']  ">
        <div class="gc-button__content">
        <span class="gc-button__text">{{content}}</span>
        </div>
    </button>
    `
})

//loading组件
Vue.component('gc-loading1',{
    props:{
        state:{
            type:Boolean,
            default:false
        }
    },
    template:`<div class="gc-loading1" v-if="state">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>`,

})

//laoding2组件
Vue.component('gc-loading2',{
    props:{
        state:{
            type:Boolean,
            default:false
        }
    },
    template:`<div class="gc-loading2" v-if="state" @click="$emit('update:state', false)">
        <span>loading...</span>
    </div>
    `
})

//dialog组件
Vue.component('gc-dialog',{
    props:{
        title:{
            type:String,
            default:'默认标题'
        },
        content:String, 
        visible:{
            type:Boolean,
            default:false
        }
    },
    template:`<div class="gc-dialog" v-if="visible">
    <div class="box">
        <div class="header">{{title}}</div>
        <div class="main">
            {{content}}
        </div>
        <div class="footer">
            <button @click="$emit('update:visible', false)">取消</button>
            <button>确定</button>
        </div>
    </div>
</div>`
})

//page组件


// page组件
Vue.component('gcPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        // total(newdata, olddata) {}
        total: {
            handler(newdata) {
                // console.log(newdata);
                // this.totalPage = Math.ceil(总条数/每页显示条数)
                // 10 / 2 = 5
                // 11 / 2 = 5.5   要6页
                this.totalPage = Math.ceil(this.total/this.pageSize)
                // console.log(this.totalPage)
            },
            immediate: true,
        }
    },
    template: `<div class="gc-page">
        <span v-for="num in totalPage" @click="$emit('click-page', num)">{{num}}</span>
    </div>`
}) 


//表格组件
Vue.component('gcThead', {
    props: {
        columns: {
            type: Array,
            required: true
        },
        data: {
            type: Array,
            required: true
        }

    },
    template: ` <table border="1" cellspacing="0" cellpadding="10">
    <thead>
    <tr>
    <th v-for="thItme in columns"> {{thItme.title}}</th>
    </tr>
    </thead>

    <tbody>
    <tr v-for="trItem in data">  
        <td v-for="thItem in columns">         
     <template v-if="thItem.render" >
     <span v-html="thItem.render(trItem)"></span>
     </template>

     <template v-else="thItem.render">
     {{trItem[thItem.key]}}
     </template>
 </td>  
   
    </tr>
    </tbody>

</table>`,
})



//element table组件
Vue.component("gcTableColumn", {
    props: ["prop", "label"],
    template: `<span />`,
    mounted() {
      this.$parent.column.push(this);
    },
  });

  Vue.component("gcTable", {
    data() {
      return {
        column: [
        ],
      };
    },
    mounted() {
      console.log(this.column);
      console.log(this.column[4].$scopedSlots.default({ sex: 1 })[0].text);
    },
    props: {
      data: {
        type: Array,
        default: [],
      },
    },
    template: `<table border="1" cellpadding="10" cellspacing="0">
      <thead>
       <tr>
         <th v-for="item in column">{{item.label}}</th>
       </tr>
      </thead>
      <tbody>
      <tr v-for="row in data">
        <!-- 
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.age}}</td>
    

        {{row.???}}
        {{row.col.prop}}
        {{row[col.prop]}}
        -->
        <td v-for="(col, index) in column">
          {{column[index].$scopedSlots.default ? column[index].$scopedSlots.default(row)[0].text : row[col.prop]}}
        </td>
      </tr>
       
       <slot></slot>
      </tbody>
    </table>`,
  });